<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
<view class="body">
        <view class="order-detail-top flex-col flex-x-center">
            <view class="order-status flex-row">
                {{data.order_info.status_name}}
                <block v-if="data.order_info.status==3&&data.order_info.is_send==0">请等待发货</block>
                <block v-if="data.order_info.status==3&&data.order_info.is_send==1&&data.order_info.is_confirm==0">订单已发货</block>
                <block v-if="data.order_info.status==3&&data.order_info.is_send==1&&data.order_info.is_confirm==1">订单已完成</block>
            </view>
            <view class="order-time flex-row" v-if="data.order_info.status==2">
                {{data.limit_time.hours}}小时{{data.limit_time.mins}}分{{data.limit_time.secs}}秒 后自动取消订单
            </view>
        </view>
        <navigator class="express-info flex-row flex-y-center" :url="'/pages/pt/express-detail/express-detail?id='+data.order_info.order_id" v-if="data.order_info.express_no&&data.order_info.is_send!==0">
            <view class="express-info-left flex-grow-1">
                <view class="express">
                    物流公司：{{data.order_info.express}}
                </view>
                <view class="express-no">
                    物流单号：{{data.order_info.express_no}}
                </view>
            </view>
            <view class="express-info-right flex-grow-0">
                <image :src="data.__wxapp_img.share.right.url"></image>
            </view>
        </navigator>
        <view class="order-address">
            <view class="user-info flex-row">
                <view class="user-info-name flex-grow-1">
                    收货人：{{data.order_info.name}}
                </view>
                <view class="user-info-mobile flex-grow-1">
                    {{data.order_info.mobile}}
                </view>
            </view>
            <view class="user-address-info" v-if="data.order_info.offline!=2">
                收货地址：{{data.order_info.address}}
            </view>
        </view>
        <view class="order-address block flex-row" v-if="data.order_info.offline==2">
            <view class="flex-grow-1">
                <view class="flex-grow-1 block-row">门店名称：{{data.order_info.shop.name}}</view>
                <view class="flex-grow-1 block-row">联系电话：{{data.order_info.shop.mobile}}</view>
                <view class="flex-grow-1">门店地址：{{data.order_info.shop.address}}</view>
            </view>
            <view class="flex-grow-0 flex-y-center" v-if="data.order_info.shop.longitude">
                <text @tap="location" class="order-no-num-right flex-grow-0 flex-y-center flex-x-center">导航</text>
            </view>
        </view>
        <view class="order-no">
            <view class="order-no-num flex-row">
                <view class="order-no-num-left flex-grow-1">
                    订单编号：{{data.order_info.order_no}}
                </view>
                <view @tap="copyText" class="order-no-num-right flex-grow-0 flex-y-center flex-x-center" :data-text="data.order_info.order_no">
                    复制
                </view>
            </view>
            <view class="order-add-time">
                下单时间：{{data.order_info.addtime}}
            </view>
        </view>
        <view class="order-info">
            <view class="order-info-item flex-row">
                <view class="order-info-title flex-grow-1">
                    商品总额
                </view>
                <view class="order-info-val flex-grow-1">
                    ¥ {{data.order_info.goods_total_price}}
                </view>
            </view>
            <view class="order-info-item flex-row">
                <view class="order-info-title flex-grow-1">
                    商品数量
                </view>
                <view class="order-info-val flex-grow-1">
                    {{data.order_info.num}}
                </view>
            </view>
            <view class="order-info-item flex-row" v-if="data.order_info.colonel>0&&data.order_info.is_group==1">
                <view class="order-info-title flex-grow-1">
                    团长优惠
                </view>
                <view class="order-info-val flex-grow-1">
                    ¥ {{data.order_info.colonel}}
                </view>
            </view>
            <view class="order-info-item flex-row">
                <view class="order-info-title flex-grow-1">
                    运费
                </view>
                <view class="order-info-val flex-grow-1">
                    ¥ {{data.order_info.express_price}}
                </view>
            </view>
        </view>
        <view class="order-total-price">
            合计：
            <text style="color:#ff5c5c;">¥ {{data.order_info.pay_price}}</text>
        </view>
        <view class="order-goods flex-row" v-for="(item,index) in data.order_info.goods_list" :key="index">
            <view class="flex-grow-0 goods-image">
                <image :src="item.goods_pic"></image>
            </view>
            <view class="flex-grow-1 flex-col">
                <view class="flex-grow-1">
                    <view class="goods-name">{{item.name}}</view>
                    <view class="attr-list flex-row">
                        <block v-for="(attr,i) in item.attr" :key="i">
                            {{attr.attr_group_name}}:{{attr.attr_name}}
                        </block>
                    </view>
                </view>
                <view class="flex-grow-0 flex-row order-price">
                    <view class="flex-grow-1 num">×{{item.num}}</view>
                    <view class="flex-grow-0 price">￥:{{item.total_price}}</view>
                </view>
            </view>
        </view>
        <view class="order-footer flex-y-center flex-row">
            <view @tap="clerkOrder" class="play-btn">
                核销订单
            </view>
        </view>
    </view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {},
			};
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e);
    },
    onReady: function(e) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(e) {
        myVue.getApp.page.onShow(this), this.loadOrderDetails();
    },
    onHide: function(e) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(e) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(e) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(e) {
        myVue.getApp.page.onReachBottom(this);
    },
    onShareAppMessage: function(e) {
        myVue.getApp.page.onShareAppMessage(this);
        var t = this, o = "/pages/pt/group/details?oid=" + t.data.order_info.order_id;
        return {
            title: t.data.order_info.goods_list[0].name,
            path: o,
            imageUrl: t.data.order_info.goods_list[0].goods_pic,
            success: function(e) {}
        };
    },
		methods: {
			loadOrderDetails: function() {
        var e = this, t = "";
        if ("undefined" == typeof my) t = e.options.scene; else if (null !== myVue.getApp.query) {
            var o = myVue.getApp.query;
            myVue.getApp.query = null, t = o.order_id;
        }
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.group.order.clerk_order_details,
            data: {
                id: t
            },
            success: function(t) {
                0 == t.code ? (3 != t.data.status && e.countDownRun(t.data.limit_time_ms), e.setData({
                    order_info: t.data,
                    limit_time: t.data.limit_time
                })) : e.getApp.core.showModal({
                    title: "提示",
                    content: t.msg,
                    showCancel: !1,
                    success: function(e) {
                        e.confirm && e.getApp.core.redirectTo({
                            url: "/pages/pt/order/order"
                        });
                    }
                });
            },
            complete: function() {
                e.getApp.core.hideLoading();
            }
        });
    },
    copyText: function(e) {
        var t = e.currentTarget.dataset.text;
        myVue.getApp.core.setClipboardData({
            data: t,
            success: function() {
                myVue.getApp.core.showToast({
                    title: "已复制"
                });
            }
        });
    },
    clerkOrder: function(e) {
        var t = this;
        myVue.getApp.core.showModal({
            title: "提示",
            content: "是否确认核销？",
            success: function(e) {
                e.confirm ? (myVue.getApp.core.showLoading({
                    title: "正在加载"
                }), myVue.getApp.request({
                    url: myVue.getApp.api.group.order.clerk,
                    data: {
                        order_id: t.data.order_info.order_id
                    },
                    success: function(e) {
                        0 == e.code ? t.getApp.core.redirectTo({
                            url: "/pages/user/user"
                        }) : t.getApp.core.showModal({
                            title: "警告！",
                            showCancel: !1,
                            content: e.msg,
                            confirmText: "确认",
                            success: function(e) {
                                e.confirm && t.getApp.core.redirectTo({
                                    url: "/pages/index/index"
                                });
                            }
                        });
                    },
                    complete: function() {
                        t.getApp.core.hideLoading();
                    }
                })) : e.cancel;
            }
        });
    },
    location: function() {
        var e = this.data.order_info.shop;
        myVue.getApp.core.openLocation({
            latitude: parseFloat(e.latitude),
            longitude: parseFloat(e.longitude),
            address: e.address,
            name: e.name
        });
    }
		},
	}
</script>

<style scoped>
.order-detail-top {
    height: 140upx;
    background-image: url('');
    color: #ffffff;
    padding-left: 88upx;
    background-size: 100% 100%;
}

.order-status {
    font-size: 13pt;
    margin-bottom: 14upx;
}

.order-time {
    font-size: 10pt;
}

.user-info-mobile {
    text-align: right;
}

.order-address {
    background-color: #ffffff;
    padding: 32upx 24upx;
    font-size: 11pt;
    color: #353535;
}

.user-address-info {
    padding-top: 19upx;
}

.order-no {
    margin-top: 20upx;
    padding: 32upx 24upx;
    font-size: 11pt;
    color: #353535;
    background-color: #ffffff;
}

.order-no-num-right {
    text-align: right;
    width: 74upx;
    height: 44upx;
    border: 1upx solid #dddddd;
    border-radius: 5upx;
    font-size: 7pt;
    color: #666666;
}

.order-add-time {
    margin-top: 20upx;
}

.order-info-val {
    text-align: right;
}

.order-info {
    margin-top: 20upx;
    padding: 12upx 24upx 32upx 24upx;
    background-color: #ffffff;
    font-size: 11pt;
    color: #353535;
}

.order-info-item {
    padding-top: 20upx;
}

.order-total-price {
    border-top: 1upx solid #e2e2e2;
    background-color: #ffffff;
    line-height: 96upx;
    text-align: right;
    height: 96upx;
    padding: 0 24upx;
    color: #353535;
    font-size: 13pt;
}

.order-goods {
    margin-top: 20upx;
    background-color: #ffffff;
    padding: 0 24upx 30upx 24upx;
    color: #353535;
}

.goods-image image {
    width: 156upx;
    height: 156upx;
    margin-right: 26upx;
    margin-top: 30upx;
}

.goods-name {
    font-size: 11pt;
    margin-top: 32upx;
    line-height: 1;
}

.attr-list {
    font-size: 9pt;
    line-height: 1;
    margin-top: 12upx;
    margin-bottom: 5upx;
}

.order-price {
    font-size: 10pt;
}

.order-footer {
    height: 98upx;
    margin-top: 20upx;
    border-top: 1upx solid #e2e2e2;
    background-color: #ffffff;
    padding: 0 24upx;
    text-align: right;
    justify-content: flex-end;
}

.play-btn {
    height: 64upx;
    border: 1upx solid #ff5c5c!important;
    color: #ff5c5c;
    border-radius: 10upx;
    line-height: 64upx;
    text-align: center;
    padding: 0 20upx!important;
    margin: 0!important;
    background-color: transparent!important;
}

button::after {
    content: normal;
}

.express-info {
    padding: 20upx 24upx;
    background-color: #ffffff;
    font-size: 11pt;
    color: #353535;
    margin-bottom: 20upx;
}

.express-info-right image {
    width: 16upx;
    height: 26upx;
}

.express {
    margin-bottom: 20upx;
}

.block {
    margin-top: 20upx;
}

.block-row {
    padding-bottom: 20upx;
}
</style>
